<template>
 
  <el-upload
    class="upload-demo"
    :data="data"
    :action="action"
    :on-preview="onPreview"
    :on-remove="onRemove"
    :on-exceed="onExceed"
    :on-success="onSuccess"
    :on-error="onError"
    :on-progress="onProcess"
    :on-change="onChange"
    :accept="fileAccept"
    :before-remove="beforeRemove"
    :before-upload="beforeUpload"
    :file-list="fileList"
    :disabled="!hasPerms(perms)"
    
    multiple
    :limit="limit">

    <el-button size="buttonSize" type="buttonType">点击上传</el-button>

    <div slot="tip" class="el-upload__tip">
      只能上传jpg/png文件，且不超过500kb
    </div>
  </el-upload>
 

</template>

<script>
import { hasPermission } from '@/permission/index.js'
export default {
  name: 'KtUpload',
  props: {
    data: {
      type: Object,
      default: null
    },
    fileList: {
      type: Array,
      default: [],
    },
    // 必选参数，上传的地址
    action: {
      type: String,
      default: "https://jsonplaceholder.typicode.com/posts/"
    },

    limit: {  // 按钮加载标识
      type: Number,
      default: 5
    },
    fileAccept: {
      type: String,
      default: ".txt"
    },
    disabled: {  // 按钮是否禁用
      type: Boolean,
      default: false
    },
    perms: {  // 按钮权限标识，外部使用者传入
      type: String,
      default: null
    },

    buttonSize: {
      type: String,
      default: 'mini'
    },
    buttonType: {
      type: String,
      default: 'primary'
    }
  },
  data() {
    return {
    }
  },
  methods: {
    //点击文件列表中已上传的文件时的钩子
    onPreview: function (file) {
      console.log("正在执行 onPreview ...")
      this.$emit('onPreview', {file:file})
    }, 

    //文件列表移除文件时的钩子
    onRemove: function (file, fileList) {
      console.log("正在执行 onPreview ...")
      this.$emit('onRemove', {file:file, fileList:fileList})
    }, 

    // 文件超出个数限制时的钩子
    onExceed: function (file, fileList) {
      console.log("正在执行 onExceed ...")
      this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${fileList.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    }, 
    // 文件上传成功时的钩子
    onSuccess: function (response, file, fileList) {
      console.log("正在执行 onSuccess ...")
      this.$emit('onSuccess', {response:response, file:file, fileList:fileList})
    }, 
    // 文件上传失败时的钩子
    onError: function (err, file, fileList) {
      console.log("正在执行 onError ...")
      this.$emit('onError', {err:err, file:file, fileList:fileList})
    }, 
    // 文件上传时的钩子
    onProcess: function (event, file, fileList) {
      console.log("正在执行 onProcess ...")
      this.$emit('onProcess', {event:event, file:file, fileList:fileList})
    }, 
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    onChange: function (file, fileList) {
      console.log("正在执行 onChange ...")
      this.$emit('onChange', {file:file, fileList:fileList})
    }, 
 
    //删除文件之前的钩子，参数为上传的文件和文件列表，若返回 false 或者返回 Promise 且被 reject，则停止删除。
    beforeRemove: function (file, fileList) {
      console.log("正在执行 beforeRemove ...")
      this.$emit('beforeRemove', {file:file, fileList:fileList})
    }, 

    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    beforeUpload: function (file) {
      console.log("正在执行 beforeUpload ...")
      this.$emit('beforeUpload', {file:file})
    },    
 
    // 根据权限标识和外部指示状态进行权限判断
    hasPerms: function (perms) {
      return hasPermission(perms) & !this.disabled
    }
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>